<template>
	<view class="goods-comment-item">
		<!-- 组件页面内容开始 -->
		<view class="box">
			<view class="head">
				<image class="head-avatar" :src="localdata.user_info.avatar" />
				<view class="head-info">
					<view class="head-info-author">
						<text class="author-nickname">{{ localdata.user_info.nickname }}</text>
					</view>
					<view class="head-info-time">
						<view class="color" />
						<text class="time-text">{{ $fn.timeFormat(localdata._add_time) }}</text>
					</view>
					<view class="goods-name">
						<text class="text-one">{{ localdata.goods_name }}</text>
					</view>
				</view>
			</view>

			<view class="content">
				<text class="content-text">{{ localdata.content }}</text>
			</view>
			<!-- 判断逻辑应该是1,4还有else -->
			<!-- 一张图的时候 -->
			<view class="grid-1" v-if="localdata.images.length == 1">
				<image v-for="(item, index) in localdata.images" :key="index" 
					:src="item" class="image" mode="aspectFill" @click.stop="preview(index, localdata.images.length)" />
			</view>
			<!-- 2或4张图的时候-->
			<view class="grid-2" v-else-if="localdata.images.length == 2 || localdata.images.length == 4">
				<image v-for="(item, index) in localdata.images" :key="index" 
					:src="item" class="image" mode="aspectFill" @click.stop="preview(index, localdata.images.length)" />
			</view>

			<!-- 三张图或者以上 -->
			<view class="grid-3" v-else>
				<image v-for="(item, index) in localdata.images" :key="index" 
					:src="item" class="image" mode="aspectFill" @click.stop="preview(index, localdata.images.length)" />
			</view>
		</view>

		<!-- 组件页面内容结束 -->
	</view>
</template>

<script>
var that; // 当前页面对象
var vk; // vk依赖
export default {
	name: "goods-comment-item",
	component: true,
	usingComponents: {},
	props: {
		mode: {
			Type: Number,
			default: 1
		},
		showCheckbox: {
			Type: Boolean,
			default: true
		},
		localdata: {
			Type: Object,
			default: {}
		}
	},
	data() {
		return {};
	},
	created() {
		var that = this;
		vk = that.vk;
		that.init();
	},
	mounted() {
		// console.log('呵呵哒')
	},
	methods: {
		// 页面数据初始化函数
		init(options = {}) {
			var that = this;
		},
		pageTo(path) {
			vk.navigateTo(path);
		},
		preview(Index, index) {
			uni.previewImage({
				current: Index,
				urls: this.localdata.images
			});
		}
	},
	// 计算属性
	computed: {}
};
</script>

<style lang="scss" scoped>
.goods-comment-item {
}
.box {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	background-color: #ffffff;
	width: 100%;
	// padding-bottom: 20rpx;
	border-radius: 10rpx;
}
.head {
	position: relative;
	display: flex;
	align-items: center;
	.head-avatar {
		margin-right: 24rpx;
		width: 108rpx;
		height: 108rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
	.head-info {
		flex: 1;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		.head-info-author {
			display: flex;
			position: relative;
			align-items: center;
			flex-direction: row;
			height: 42rpx;
			.author-nickname {
				margin-right: 16rpx;
				line-height: 30rpx;
				white-space: nowrap;
				color: #232323;
				font-size: 30rpx;
				font-weight: 400;
			}
		}
		.head-info-time {
			display: flex;
			position: relative;
			align-items: center;
			flex-direction: row;
			margin-top: 4rpx;
			height: 33rpx;
			.color {
				margin-top: 3rpx;
				margin-right: 7rpx;
				border-radius: 6rpx;
				background-color: #60cf73;
				width: 12rpx;
				height: 12rpx;
			}
			.time-text {
				line-height: 24rpx;
				white-space: nowrap;
				color: #878787;
				font-size: 24rpx;
				font-weight: 400;
			}
		}
		.goods-name {
			color: #878787;
			font-size: 24rpx;
			font-weight: 400;
			margin-top: 6rpx;
		}
	}
}

.word {
	margin-top: -2rpx;
	margin-right: 11rpx;
	line-height: 20rpx;
	white-space: nowrap;
	color: #40d2cc;
	font-size: 20rpx;
	font-weight: 400;
}
.wrap {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-direction: row;
	margin-top: -1rpx;
	background-color: #fef5f5;
	padding-right: 12rpx;
	padding-left: 12rpx;
	height: 29rpx;
}

.content {
	width: 100%;
	margin-top: 20rpx;
	position: relative;
	.content-text {
		width: 100%;
		word-break: break-all;
		word-wrap: break-word;
	}
}

.grid-1 {
	margin-top: 20rpx;
	display: block;
	width: 100%;
	.image {
		width: 100%;
		height: 750rpx;
		display: block;
	}
}

.grid-2 {
	margin-top: 20rpx;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10rpx 10rpx;
	.image {
		width: 100%;
		height: 325rpx;
		display: block;
	}
}

.grid-3 {
	margin-top: 20rpx;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10rpx 10rpx;
	.image {
		width: 100%;
		height: 236rpx;
	}
}

</style>
